<template>
  <div>
    <crumb />
    <div class="main-contianer2 skill-main">
      <div class="main-left">
        <LeftTreeList :list="list" :tree-props="treeProps" :top-content="topContent" :isBtn="false" @clickItem="clickItem" />
      </div>
      <div class="main-right" v-if="tab===1">
        <div class="title" @click="$router.push('/sjjndetails')">
          {{title || '请选择任务'}}
        </div>
        <div class="status">
          <div>任务数量：{{total}}</div>
          <div>已完成：{{finishNums}}</div>
          <!-- <div>平均得分：97</div> -->
        </div>
        <InsTable :table-head="tableHead" :table-data="trainingTaskList" tableHeight="500">
          <!-- 自定义列 任务标题 -->
          <el-table-column
            slot="resource_training_name"
            slot-scope="headScope"
            show-overflow-tooltip
            width="400"
            :label="headScope.head.label">
            <template slot-scope="scope">
              {{ scope.row[headScope.head.prop] }}
            </template>
          </el-table-column>
          <!-- 自定义列 完成状态 -->
          <el-table-column slot="finished_flag" slot-scope="headScope" :label="headScope.head.label">
            <!-- 1-进行中；2-完成；0或者空则为未开始 -->
            <template slot-scope="scope">
              <span
                :style="{
                  color: scope.row.finished_flag === '1' ? '#04CB74' : scope.row.finished_flag === '2' ? '' : '#F51B4E'
                }"
                >{{ scope.row.finished_flag === '1' ? '进行中' : scope.row.finished_flag === '2' ? '已完成' : '未开始'}}</span
              >
            </template>
          </el-table-column>
          <!-- 自定义列 操作 -->
          <el-table-column slot="opera" slot-scope="headScope"  fixed="right" align="center" :label="headScope.head.label">
            <template slot-scope="scope">
              <el-button
                @click="handle(scope.row)"
                type="primary"
                :data="scope"
                size="mini"
                >进入训练</el-button
              >
            </template>
          </el-table-column>
        </InsTable>
      </div>
      <div class="main-right" v-if="tab===2">
        <SkillTrain :lessonTrainingCatalogId="lessonTrainingCatalogId"
        :resourceTrainingId="resourceTrainingId"
        ></SkillTrain>
      </div>
    </div>
  </div>
</template>

<script>
import LeftTreeList from '@/components/LeftTreeList'
import InsTable from '@/components/InsTable'
import SkillTrain from './SkillTrain'

import {
  skillIndex
} from '@/api/student/training/skill'
export default {
  name: 'index',
  components: {
    LeftTreeList,
    InsTable,
    SkillTrain
  },
  data () {
    return {
      list: [],
      tab: 1,
      treeProps: {
        children: 'childrens',
        label: 'catalogName'
      },
      topContent: {
        lessonName: '', // 课程名称
        finishedRate: '', // 进度
        catalogNum: '', // 章节数
        leadRate: '', // 领先度
        trainingNum: '' // 任务总数
      },
      title: '',
      total: 0,
      finishNums: 0,
      trainingTaskList: [],
      tableHead: [
        {
          label: '任务名称', prop: 'resource_training_name', isSlot: true
        }, {
          label: '题量', prop: 'subject_num'
        }, {
          label: '完成状态', prop: 'finished_flag', isSlot: true // 1-进行中；2-完成；0或者空则为未开始"
        }, {
          label: '操作', prop: 'opera', isSlot: true
        }
      ],
      lessonTrainingCatalogId: '',
      resourceTrainingId: ''
    }
  },
  mounted () {
    this.skillIndex()
  },
  methods: {
    async skillIndex () {
      const res = await skillIndex()
      this.list = res.data.trainingList
      Object.assign(this.topContent, {
        lessonName: res.data.lessonName,
        finishedRate: res.data.finishedRate,
        catalogNum: res.data.catalogNum,
        leadRate: res.data.leadRate,
        trainingNum: res.data.trainingNum
      })
    },
    handle (row) {
      this.tab = 2
      this.lessonTrainingCatalogId = row.lesson_training_catalog_id
      this.resourceTrainingId = row.resource_training_id
      // this.$router.push({
      //   name: 'skilltrain',
      //   query: {
      //     lesson_training_catalog_id: row.lesson_training_catalog_id,
      //     resource_training_id: row.resource_training_id
      //   }
      // })
    },
    async clickItem (data) {
      this.tab = 1
      this.trainingTaskList = data.trainingTaskList
      this.title = data.catalogName
      this.total = this.trainingTaskList.length
      this.finishNums = this.trainingTaskList.filter(item => {
        return item.finished_flag === '2'
      }).length
    }
  }
}
</script>
<style scoped lang="scss">
.skill-main {
  .main-left {
    width: 452px;
    height: 100%;
  }
  .main-right {
    width: 728px;
    background: rgba(255, 255, 255, 1);
    border: 1px solid rgba(229, 229, 229, 1);
    border-radius: 5px;
    float: right;
    padding: 20px 25px;
    padding-bottom: 182px;

    box-sizing: border-box;
    .title {
      font-size: 20px;
      font-weight: bold;
      color: rgba(16, 29, 55, 1);
    }
    .status {
      display: flex;
      margin: 20px 0;
      div {
        margin-right: 66px;
      }
    }
    .el-table {
      margin-top: 30px;
      border: 1px solid #e5e5e5;
    }
  }
}
.dashed {
  border-bottom: 1px dashed #e5e5e5;
  padding: 10px 0;
}
.dashed:hover {
  background-color: #ccc;
}
::v-deep .el-collapse-item__content {
  padding-bottom: 0;
}
</style>
